iT邦幫忙

2021 iThome 鐵人賽
DAY 6
0
Modern Web

從零開始的寫web app 30天生活系列 第 6 篇

Day 6 - 原型 (5): 帖子頁的元件組合

13th鐵人賽 ui prototype figma
763 瀏覽

  • 分享至 

  • xImage
    •  

前言

利用剛設計好的帖子頁元件, 組合成帖子頁｡

元件組合

  1. 建立一個屬於帖子頁的frame

先在Pages/Blog中, 按一下主頁的frame, 再按快捷鍵Ctrl + D來複製一個新的frame

https://ithelp.ithome.com.tw/upload/images/20210918/20140375eBiBGB0mqd.png

  1. 清除帖子頁中不用的元件

https://ithelp.ithome.com.tw/upload/images/20210918/20140375tlD4OfspxP.png

  1. 加上帖子頁元件

https://ithelp.ithome.com.tw/upload/images/20210918/20140375cu7KdxluvQ.png

  1. 增加一些帖子, 滿足一下空間感

https://ithelp.ithome.com.tw/upload/images/20210918/20140375nxkh2JCzXP.png

帖子內容應延伸至滿, 這個可以利用Resizing的Fill container
https://ithelp.ithome.com.tw/upload/images/20210918/20140375Hmh489IqEW.png

延伸的效果
https://ithelp.ithome.com.tw/upload/images/20210918/20140375JSh0entc66.png

  1. 修正一下回覆條和帖子的佈局跟樣式

https://ithelp.ithome.com.tw/upload/images/20210918/20140375yR8kkQup4a.png

  1. 修正"回到主頁"按鈕的樣式

https://ithelp.ithome.com.tw/upload/images/20210918/20140375Z4X4163Xog.png

  1. 大致上完成, 看看整體效果

https://ithelp.ithome.com.tw/upload/images/20210918/20140375m6tPRC48Vk.png

結語

明天利用Figma的預覽原型功能展示一下Blog｡


上一篇
Day 5 - 原型 (4): 帖子頁元件
下一篇
Day 7 - 原型 (6): 預覽主頁
系列文
從零開始的寫web app 30天生活 共 10 篇
  1. 6
    Day 6 - 原型 (5): 帖子頁的元件組合
  2. 7
    Day 7 - 原型 (6): 預覽主頁
  3. 8
    Day 8 - 原型 (7): 完成
  4. 9
    Day 9 - HTML
  5. 10
    Day 10 - JavaScript(1) : 變數與資料類型
完整目錄
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言
iThome鐵人賽
參賽組數
1064 組
團體組數
40 組
累計文章數
22201 篇
完賽人數
602 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js
熱門問題
熱門回答
熱門文章
IT邦幫忙